<template lang="html">
  <div class="index-wrapper">

  <scroller ref="myScroller"  :on-infinite="infinite">


     <div class="header-wrapper">

       <div class="position-box">
         <div class="left">
        <i class="icon iconfont icon-location"></i>
        <span class="text">
       北京市北京吉利大学
       </span>
        <i class="icon iconfont icon-chevron-copy-copy-copy"></i>
         </div>
       </div>

       <div class="search-box">
         <div class="search">
          搜索商家/商品
          </div>
       </div>

       <div class="swipper-wrapper-box">
         <div class="swiper-container" id="line-slide">
        <div class="swiper-wrapper">
          <div class="swiper-slide" style="width:auto;padding:0 5px;" v-for="item in quickDataList">{{item.title}}</div>
        </div>
        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar" style="bottom:-3px;"></div>
         </div>
       </div>
  </div>


<div class="swiper-container slide-menu" >
   <div class="swiper-wrapper">
     <div class="swiper-slide">1</div>
     <div class="swiper-slide">2</div>
     <div class="swiper-slide">3</div>
     <div class="swiper-slide">4</div>
     <div class="swiper-slide">5</div>
     <div class="swiper-slide">6</div>
     <div class="swiper-slide">7</div>
     <div class="swiper-slide">8</div>
     <div class="swiper-slide">9</div>
     <div class="swiper-slide">10</div>
     <div class="swiper-slide">11</div>
     <div class="swiper-slide">12</div>
     <div class="swiper-slide">13</div>
     <div class="swiper-slide">14</div>
     <div class="swiper-slide">15</div>
     <div class="swiper-slide">16</div>
  </div>
</div>

    <div class="shop-box">
      <h3>推荐商家</h3>
       <ul>
         <router-link :key=index tag="li" v-for="(s,index) in sellers" :to="{path:'/shop/'+index}"
          >
            <img :src="s.avatar" alt="">
            <div class="info">
                <div class="title">
                 {{s.name}}
                </div>
                <div class="star-box">
                 月售{{s.sellCount}}单
                </div>
                <div class="dilivery-box">
                 {{s.minPrice}}元起送 / 配送费 {{s.deliveryPrice}} / ￥
                 {{s.rankrate}}/人
                </div>
            </div>
          </router-link>
       </ul>
    </div>

    </scroller>
    <footerbar></footerbar>


  </div>
</template>

<script>
import Vue from 'vue'
import footerbar from '@/components/footerBar'

import VueAwesomeSwiper from 'vue-awesome-swiper'
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)
export default {
  data() {
    return {
     sellers:[],
     totalSeller:[],
      noDate:false,
      quickDataList: [{
          title: '馄饨'
        },
        {
          title: '张亮麻辣烫'
        },
        {
          title: '水果捞'
        },
        {
          title: '肯德基'
        },
        {
          title: '千层荡糕'
        },
        {
          title: '超级鸡车'
        },
        {
          title: '烤肉饭'
        },
        {
          title: '牛肉板面'
        },
        {
          title: '海南鸡'
        },
        {
          title: '吉祥馄饨'
        },

      ]
    }
  },
  components: {
    footerbar,
    VueAwesomeSwiper

  },
  mounted() {
    var mySwiper = new Swiper('#line-slide', {
      direction: 'horizontal',
      freeMode: true,
      freeModeMomentum: true,
      slidesPerView: 'auto',
      // 如果需要滚动条
      scrollbar: '.swiper-scrollbar',
    })
    var mySwiper = new Swiper('.slide-menu', {
      direction: 'horizontal',
      freeMode: true,
      slidesPerColumn: 2,
      slidesPerView: 4,
    })


     this.axios.get('/api/seller').then(res =>
     {
        if(res.data.errno==0){
          this.totalSeller=res.data.data;
            let temp =this.totalSeller.concat();
           this.sellers=temp.splice(0,5);
        }
     })
  },
  methods: {
    infinite(done) {
      let self = this;

       if(this.noDate){
         setTimeout(()=>{
            self.$refs.myScroller.finishInfinite(2);
         })
         return;
       }

      let start = this.sellers.length;

      setTimeout(() => {
        let  total=self.totalSeller.concat(0);
        let temp =total.splice(start,2)
          this.sellers=this.sellers.concat(temp);
        if(temp.length==0){
          self.noDate=true;
        }
        self.$refs.myScroller.resize();
        done();
      }, 1500)

    }

  }
}
</script>

<style lang="less">
@import '../../static/less/var.less';
.index-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    bottom: @base*100rem;
    height: 100%;
    .header-wrapper {
        width: 100%;
        height: @base*244rem;
        box-sizing: border-box;
        background: @mc;
        padding: @base*20rem @base*28rem;
        .position-box {
            width: 100%;
            height: @base*69rem;
            line-height: @base*69rem;
            .left {
                i {
                    font-size: @base*40rem;
                    color: #fff;
                    float: left;
                }
                .text {
                    width: @base*333rem;
                    height: @base*52rem;
                    overflow: hidden;
                    float: left;
                    font-size: @base*32rem;
                    color: #fff;
                }
            }
        }
        .search-box {
            height: @base*72rem;
            width: 100%;
            padding-top: @base*10rem;
            .search {
                width: 100%;
                height: @base*72rem;
                background: #fff;
                text-align: center;
                line-height: @base*72rem;
                color: @fc1;
                font-size: @base*24rem;
                border-radius: @base*30rem;
            }
        }
        .swipper-wrapper-box {
            height: @base*45rem;
            margin-top: @base*13rem;
            font-size: @base*24rem;
            color: #fff;
            font-weight: 200;
        }
    }
    .slide-menu {
        height: @base*354rem;
        background: pink;
        div {
            color: #fff;
            height: @base*177rem;
            line-height: @base*127rem;
            text-align: center;
        }
    }

    .shop-box{
        height: #fff;
        margin-top:@base*10rem;
        h3{
          padding: @base*10rem @base*30rem;
          font-size: @base*30rem;
        }
        ul{
          width: 100%;
          list-style: none;
          li{
            display: flex;
            justify-content: space-between;
            padding: @base*20rem @base*20rem;
            border-bottom: 1px solid @bc1;
            img{
              padding-top: @base*30rem;
              width: @base*60rem;
              height: @base*60rem;
            }
            .info{
              margin-left: @base*25rem;
               display: flex;
               flex: 1;
               flex-direction: column;
            }
          }
        }
    }

}
</style>
